<template>
    <van-nav-bar :fixed="true" title="支付" left-text="返回" left-arrow @click-left="backCart" />
    <div style="margin-top: 46px;"><van-contact-card type="edit" :tel="tel" :name="name" to="addressEmit"/></div>
    <div style="margin-bottom: 70px;"><van-swipe-cell v-for="item in orderStore.OrderList" :key="item.id">
        <van-card :price="(item.price*item.num).toFixed(2)" :title="item.name" >
                        <template #thumb>
                            <div class="g-thumb">
                                <van-image :src="item.url" width="70%"></van-image>
                            </div>
                        </template>
                        <template #footer>
                            <div class="g-footer">
                                <div class="g-stepper" @click.stop><van-stepper v-model="item.num" integer /></div>
                            </div>
                        </template>
        </van-card>
        <template #right>
            <van-button square text="删除" type="danger" class="delete-button" @click="bindDeleteOrder(item.id)"/>
        </template>
        
    </van-swipe-cell>
    </div>
    <van-submit-bar button-text="支付" @submit="onSubmit" />
    
</template>

<script setup lang="ts">
import { useOrderStore } from '@/stores/order'
import { ref } from 'vue';
import { Toast } from 'vant';
import { useCart } from '@/hooks/cart'
const{backCart,bindDeleteOrder,onSubmit}=useCart()

const orderStore = useOrderStore()


const tel = ref('13000000000');
const name = ref('张三');




</script>

<style scoped>
.van-card {
    background-color: #ffffff;
    border-bottom: 1px solid #cccccc;
    margin-right: 25px;
}
.van-image {
    margin-top: 25px;
}
.delete-button {
    height: 100%;
  }
</style>